<template>
	<view class="container" style="height: 100%;">
		<!-- 搜索栏 -->
		<view class="searchZone">
			<my-search @click="toSearchPage"></my-search>
		</view>
		
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperDataList" :key="item.goods_id">
				<navigator :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id" class="swiper-item">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类导航栏 -->
		<view class="navListZone">
			<image v-for="(item,index) in navList" :key="index" :src="item.image_src" class="navItem" @click="navClickHandler(item)"></image>
		</view>
		<!-- 楼层 -->
		<view class="floorZone">
			<view class="floorItem" v-for="(item,index) in floorList" :key="index">
				<view class="floorTitle">
					<image :src="item.floor_title.image_src" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="productZone">
					<navigator class="product-img-left" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
					</navigator>
					<view class="product-img-right">
						<navigator v-for="(item2,index2) in item.product_list" :key="index2" v-show="index2 !== 0" :url="item2.url">
							<image :style="{width: item2.image_width + 'rpx'}" mode="widthFix" :src="item2.image_src"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,onUnmounted } from 'vue'
	import { swiperDataListGetService,navListDataGetService,floorDataGetService } from '../../api/home.js'
	import { onLoad } from "@dcloudio/uni-app"
	
	const swiperDataList = ref([]);//轮播图数据列表
	const navList = ref([]);//分类导航菜单数据列表
	const floorList = ref([]);//楼层列表数据
	
	//发起请求获取轮播图数据
	const getSwiperData = async () => {
		let { data:res } =  await swiperDataListGetService();
		if(res.meta.status !== 200){
			// uni.showToast({
			// 	title: '数据请求失败!',
			// 	duration: 1500,
			// 	icon: none
			// })
			uni.$showMsg();
		}
		swiperDataList.value = res.message;
	}
	getSwiperData();
	
	//获取分类导航菜单
	const getNavListData = async () => {
		let {data:res} = await navListDataGetService();
		if(res.meta.status !== 200){
			uni.$showMsg();
		}
		navList.value = res.message;
	}
	getNavListData();
	
	//点击分类导航第一项时跳转到分类页面
	const navClickHandler = (item) => {
		if(item.name === '分类'){
			uni.switchTab({
				url: '/pages/cate/cate'
			})
		}
	}
	
	//获取楼层数据
	const getFloorData = async () => {
		let {data:res} = await floorDataGetService();
		if(res.meta.status !== 200){
			uni.$showMsg();
		}
		
		// 通过双层 forEach 循环，处理 URL 地址
		  res.message.forEach(floor => {
		    floor.product_list.forEach(prod => {
		      prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
		    })
		  })

		console.log("floorRes====>",res);
		floorList.value = res.message;
	}
	getFloorData();		

	//跳转至搜索页面
	const toSearchPage = () => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;
		.swiper-item,image {
			width: 100%;
			height: 100%;
		}
	}
	.navListZone{
		height: 15%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.navItem{
			height: 140rpx;
			width: 140rpx;
		}
	}
	
	.floorZone{
		.floorItem{
			.floorTitle{
			}
			.productZone{
				display: flex;
				.product-img-left{
					padding: 0 10rpx;
				}
				.product-img-right{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: center;
				}
			}
		}
	}
	
	.searchZone{
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>
